<script setup>
  import { onMounted, ref } from 'vue'

  const isMobileDevice = ref(false)
  const continueAnyway = ref(false)

  // 检测设备类型的函数
  const checkDeviceType = () => {
    // 使用 navigator.userAgent 和正则表达式检测移动设备
    const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i
    isMobileDevice.value = mobileRegex.test(navigator.userAgent)
  }

  // 继续预览的函数
  const handleContinueAnyway = () => {
    continueAnyway.value = true
    // 可以选择将用户选择保存到 localStorage，这样刷新页面后不会再显示提示
    localStorage.setItem('continueInMobile', 'true')
  }

  // 组件挂载时检测设备类型
  onMounted(() => {
    checkDeviceType()
    // 监听窗口大小变化，在调整大小时重新检测
    window.addEventListener('resize', checkDeviceType)

    // 检查是否之前选择过"继续访问"
    if (localStorage.getItem('continueInMobile') === 'true') {
      continueAnyway.value = true
    }
  })
</script>

<template>
  <div>
    <!-- 如果不是移动设备，或者用户选择了继续访问，显示应用程序 -->
    <div v-if="!isMobileDevice || continueAnyway" id="app">
      <router-view></router-view>
    </div>

    <!-- 如果是移动设备且用户未选择继续访问，显示提示信息 -->
    <div v-else class="mobile-notice">
      <div class="notice-content">
        <h2>请使用PC访问</h2>
        <p>此应用程序需要在电脑上使用以获得最佳体验。</p>
        <p>请使用台式电脑或笔记本电脑访问本网站。</p>
        <button class="continue-btn" @click="handleContinueAnyway">继续预览</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
  #app {
    display: flex;
    flex-direction: column;
  }

  .mobile-notice {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 20px;
    background-color: #f5f5f5;
    text-align: center;
  }

  .notice-content {
    max-width: 500px;
    padding: 30px;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  h2 {
    margin-bottom: 20px;
    color: #e74c3c;
  }

  p {
    margin-bottom: 10px;
    line-height: 1.5;
  }

  .continue-btn {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
  }

  .continue-btn:hover {
    background-color: #2980b9;
  }
</style>
